<!-- 教师子女认证 -->
<template>
	<view class="container">
		<view class="c-form">
			<view class="form-info">
				<u-form :model="cerInfo">
					<u-form-item label="证件号码" required>
						<u-input placeholder="输入学生证件号码" v-model="cerInfo.student_document_nums" :disabled="isDisabled">
						</u-input>
					</u-form-item>
					<u-form-item label="证明材料" required>
						<view class="">
							<u-upload width="200rpx" height="200rpx" :uploadIconColor="'#666'" :uploadIcon="'plus'"
								:fileList="filePath" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic"
								name="1" :maxCount="3"></u-upload>
						</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="c-btn">
				<!-- <view class="btn-block">
					<u-button type="primary" text="修改信息" @click="toStudentInfo"></u-button>
				</view> -->
				<view class="btn-block">
					<u-button type="primary" text="提交认证" @click="onCer" shape="circle"></u-button>
				</view>
			</view>
			<view class="c-hint">
				<text><text style="color: red;">*</text>请先添加完善学生信息之后再做亲属认证</text>
			</view>
		</view>
		<view class="c-list">
			<view class="list-header">
				<text>已申请列表</text>
			</view>
			<view class="list-cell">
				<u-cell-group>
					<u-cell v-for="item in cerList" :key="item.id" :data-sn="item.document_nums" :title="'认证人：'+item.student_document_nums"
						:label="item.status==1?'等待审核':item.status==2?'审核通过':'审核拒绝'" size="large"></u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				// 图片
				filePath: [],
				// 认证信息
				cerInfo: {
					student_document_nums: null, // 证件号
					relatives_img: null // 图片
				},
				cerList:[] // 认证列表
			}
		},
		onLoad(){
			this.getTeacjerChildList()
		},
		methods: {
			// 提交认证申请
			onCer() {
				this.$http.teacherChildCer(this.cerInfo).then(res => {
					uni.$u.toast("已提交")
					this.cerInfo = {
						student_document_nums: null, // 证件号
						relatives_img: null // 图片
					}
					this.filePath = []
				}).catch(err => {
					uni.$u.toast(err.msg)
				})
			},
			// 教师子女申请列表
			getTeacjerChildList() {
				this.$http.getTeacjerChildList().then(res => {
					this.cerList = res.data
				})
			},
			// 图片上传后
			afterRead(e) {
				// 微信小程序不支持多张图片上传
				uni.uploadFile({
					url: this.baseURL + '/api/common/upload',
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": this.$store.state.token
					},
					success: (res) => {
						if (res.statusCode == 200) {
							let result = JSON.parse(res.data)
							let {
								data: {
									url,
									fullurl
								}
							} = result
							this.filePath = [{
								url: fullurl
							}]
							this.cerInfo.relatives_img = url
						} else {
							let result = JSON.parse(res.data)
							uni.$u.toast(result.msg)
						}

					},
					fail: (err) => {
						uni.$u.toast(err)
					}
				})
			},
			// 删除图片
			deletePic(e) {
				if (this.isDisabled) return
				this.filePath = []
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.c-form {
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;
		}
		.c-list{
			width: 100%;
			.list-header{
				font-size: 36rpx;
				line-height: 80rpx;
				font-weight: bold;
			}
			.list-cell{
				width: 100%;
				background-color: #fff;
			}
		}
		.c-hint{
			font-size: 28rpx;
			padding: 15rpx 10rpx;
			box-sizing: border-box;
		}
		.c-btn{
			width: 100%;
			// height: 60rpx;
			.btn-block{
				width: 80%;
				height: 100%;
				margin: 0 auto;
			}
		}
	}
</style>
